<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>类别</title>
<meta name="decorator" content="sysDefault" />

<script src="${staticPath}/lib/ztree/3.5/js/jquery.ztree.all-3.5.js"
	type="text/javascript"></script>
<link rel="stylesheet"
	href="${staticPath}/lib/ztree/3.5/css/zTreeStyle/zTreeStyle.css"
	type="text/css">
<script type="text/javascript">
	var setting = {
		view : {
			selectedMulti : false,
			nameIsHTML : true
		},
		edit : {
			enable : true,
			editNameSelectAll : false,
			showRemoveBtn : true,
			showRenameBtn : true
		},
		async : {
			enable : true,
			url : getUrl
		},
		check : {
			enable : true
		},
		data : {
			simpleData : {
				enable : true
			}
		},
		callback : {
			onCheck : zTreeOnCheck,
			beforeRemove : beforeRemove,
			beforeEditName : beforeEditName,
			onAsyncSuccess : onAsyncSuccess,
			onAsyncError : onAsyncError,
			beforeExpand : beforeExpand
		}
	};

	var zTree;
	var treeNodes;
	var _treeNode;
	var dragId;

	var log, className = "dark", startTime = 0, endTime = 0, perCount = 100, perTime = 100;

	$(document).ready(function() {
		$.get("${contextPath}/sys/base/getNode", function(data) {
			$('#result').text(data);//直接展示JSON数据
			treeNodes = eval("(" + data + ")");
			$.fn.zTree.init($("#categoryTree"), setting, treeNodes);
		});

	});
	//请求路径
	function getUrl(treeId, treeNode) {
		return "${contextPath}/sys/base/json?treeNodeId=" + treeNode.id;
	}

	function beforeExpand(treeId, treeNode) {
		if (!treeNode.isAjaxing) {
			startTime = new Date();
			treeNode.times = 1;
			ajaxGetNodes(treeNode, "refresh");
			return true;
		} else {
			alert("zTree 正在下载数据中，请稍后展开节点。。。");
			return false;
		}
	}

	function ajaxGetNodes(treeNode, reloadType) {
		var zTree = $.fn.zTree.getZTreeObj("categoryTree");
		if (reloadType == "refresh") {
			zTree.updateNode(treeNode);
		}
		zTree.reAsyncChildNodes(treeNode, reloadType, true);
	}

	function onAsyncSuccess(event, treeId, treeNode, msg) {
		if (!msg || msg.length == 0) {
			return;
		}
		var zTree = $.fn.zTree.getZTreeObj("categoryTree"), totalCount = treeNode.count;
		if (treeNode.children.length < totalCount) {
			setTimeout(function() {
				ajaxGetNodes(treeNode);
			}, perTime);
		} else {
			treeNode.icon = "";
			zTree.updateNode(treeNode);
			zTree.selectNode(treeNode.children[0]);
		}
	}
	function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus,
			errorThrown) {
		var zTree = $.fn.zTree.getZTreeObj("categoryTree");
		alert("异步获取数据出现异常。");
		treeNode.icon = "";
		zTree.updateNode(treeNode);
	}

	function beforeEditName(treeId, treeNode) {
		url = '${contextPath}/sys/base/edit?treeid=' + treeNode.id + '';
		window.open(url, '_self');
		return false;
	}

	function beforeRemove(treeId, treeNode) {
		var flag = confirm("确认删除 节点 -- " + treeNode.name + " 吗？")
		if (flag) {
			className = (className === "dark" ? "" : "dark");
			var zTree = $.fn.zTree.getZTreeObj("categoryTree");
			zTree.selectNode(treeNode);
			$.get("${contextPath}/sys/base/remove?treeId=" + treeNode.id + "",
					function(data) {
						$('#result').text(data);//直接展示JSON数据
						zNodes = eval("(" + data + ")");
					});
		}
		return flag;
	}

	/**
	 *点击复选框调用该函数 
	 */

	function zTreeOnCheck(event, treeId, treeNode) {
		_treeNode = treeNode;
	}

	function funform(url, target) {
		var treeid;
		if (_treeNode != null) {
			treeid = _treeNode.id
		}

		if (treeid == "" || typeof (treeid) == "undefined") {
			alert("请选择上级节点");
		} else {
			window.open(url + "?treeid=" + treeid, target);
		}
	}
</script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12">
				<div class="panel panel-default">
					<div class="panel-heading">
						<tags:message content="${message}" />
						<h3 class="panel-title">
							类别管理<span class="glyphicon &{icon}"></span>
							<button id="add" class="btn btn-success btn-sm pull-right"
								role="button"
								onclick="funform('${contextPath}/sys/base/add','_self');">新增</button>
						</h3>
					</div>
					<ul id="categoryTree" class="ztree"></ul>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
